<template>
	<view class="page-custom-order">
		<view class="page-custom-order-header">
			<basic-nav-bar 
				backgroundColor="transparent"
				:statusBar="true"
				:border="false" 
				:fixed="true"
				left-icon="arrowleft" 
				title="我的定制"/>	
		</view>
		<view class="page-custom-order-content" :style="{'padding-top': headerHeight + 'px'}">
			<view class="page-custom-order-list">
				<orderList
          :list="orderList"
          :loading="isLoading"
          :isFinished="isFinished"
          @loadMore="getData"
          @click:cancel="goCancel"/>
			</view>
		</view>

		<!-- 取消原因 -->
		<customCancel ref="customCancel" :orderId="curOrderId" @refreshOrder="refreshOrderList" />
		
	</view>
</template>
<script>
import sdk from 'sdk'
import ajax, {getCustomOrders, canelCustomOrder} from 'api'
import {isEmpty} from 'utils/helper/validator'
import modal from 'utils/helper/modal'
import orderList from './components/list'
import store from '@/store'
import {decodeQueryObject} from 'utils/helper/query'
import customCancel from '../../components/custom-cancel'

export default {
  name: 'order',
  
	components: { orderList, customCancel },

  props: {
		item: { type: Object, default:() => ({}) }
  },
  
	data() {
		return {
		curOrderId: 0, // 当前操作的订单id
		pageSize: 10,
		pageNum: 1,
		total: 0,
		isLoading: false,
		isFinished: false,

		orderList: [],
		showCancelPopover: false,
		
		headerHeight: 84,
		backToHome: false
		}
	},

	computed: {
		hasLogin() {
			return this.$store.state.login.hasLogin
		}
	},

	watch: {
		hasLogin(val, oldVal) {
			// 登录完重新请求接口
			if(val && !oldVal) {
				this.getData()
			}
		}
	},
	onLoad(query) {
		// if(sdk.refreshPage) sdk.refreshPage(this.checkNeedRefresh)

		this.getQuery(query)

		const options = decodeQueryObject(query)
		const { mToken } = options
		if(mToken) store.commit('SAVE_TOKEN', { token: mToken })
	},

	onShow() {
		// @deprecated 强制登录（loadMore已触发首页加载，此处多余）
		if (!this.$store.state.login.hasLogin) {
			console.log('[order index::准备登录]')
			sdk.login({
				notCallLogin: false
			}).then(res => {
				console.log('[order index::登录成功]')
				this.refreshOrderList()
			})
		} else {
			console.log('[order index::初始化检测为已登录]')
			this.refreshOrderList()
		}
	},

	mounted() {
		this.initHeaderHeight()
	},
	methods: {
		getQuery(query) {
			// 取消支付跳转到订单列表，则点击返回按钮跳转到首页
			let {payCancelUrl} = decodeQueryObject(query)
			this.backToHome = !!payCancelUrl
		},
		initHeaderHeight() {
			sdk.getOffset('.page-custom-order-header').then(res => {
				this.headerHeight = res.height
			})
		},
		/**
		 * 检查是否在详情页是否操作过订单
		 */
		// checkNeedRefresh() {
		// 	sdk.getSelectCity().then(res => {
		// 		let { needRefresh } = res

		// 		if (needRefresh) {
		// 			this.refreshOrderList()
		// 		}

		// 		sdk.selectCity({ needRefresh: 0 })
		// 	})
		// },
		/**
		 * 刷新当前tab，以更新订单状态
		 */
		refreshOrderList() {
			this.pageNum = 1
			this.isLoading = false
			this.isFinished = false

			this.getData()
		},
		getData() {
			// 未登录，防止登录结束前loadMore再次触发接口请求
			if (!this.$store.state.login.hasLogin) return

			if (this.isLoading) return

			this.isLoading = true
			sdk.showLoading({mask: true})

			getCustomOrders({}, {
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}).then(res => {
				if (!res.result || !res.result.list || !res.result.list.length) {
					res.result = {}
					this.isFinished = true
				}
				
				// 总数
				this.total = res.result.total
				if (this.pageNum <= 1) {
					this.orderList = res.result.list || []
				} else {
					this.orderList.push.apply(this.orderList, res.result.list || [])
				}

				// 检查是否加载完毕
				if (this.pageNum >= res.result.pages) {
					this.isFinished = true
				}

				this.pageNum++

				this.isLoading = false

				sdk.hideLoading()
			}).catch(_ => {
				sdk.hideLoading()
				this.isLoading = false
			})
		},
		
		// 取消订单，跳转到取消订单页面
		goCancel(index) {
			// 弹框选择取消原因
			this.showCancelPopover = true
			
			this.curOrderId = this.orderList[index].id

			this.$refs.customCancel.show()
		},
	}
}
</script>
<style lang="less">
.page-custom-order{
	background: #F6F9FD;
	height: 100vh;
	display: flex;
	flex-direction: column;
	.page-custom-order-header{
		position: fixed;
		left:0;
		top:0;
		right:0;
		z-index: 999;
	}
	.page-custom-order-content{
		background: #F6F9FD;
		padding-top: 168rpx;
		height: 100%;
		box-sizing: border-box;
		.page-custom-order-list{
			padding: 20rpx @page_horizonal_margin;
			box-sizing: border-box;
			height: 100%;	
			.swiper{
				height: 100%;
			}
		}
	}

	// @selector__row_height: 80rpx;
	// @selector_height: 442rpx;

	// /deep/ .selector {
	// 	width: 100%;
	// 	height: @selector_height;
	// }

	// /deep/ .selector-item {
	// 	height: @selector__row_height;
	// 	line-height: @selector__row_height;
	// 	text-align: center;
	// }

	// /deep/ .selector-indicator {
	// 	height: @selector__row_height;
	// }

	// .popover-btn-wrapper {
	// 	.flex;
	// 	.flex-middle;
	// 	.flex-between;

	// 	padding: 0 30rpx;
	// 	height: 130rpx;
	// 	border-top: 1rpx solid @border_color;
	// }
}
</style>